<template>
	<view class="header">
		<view :class="{'navbar-mini':!matchLeftWindow}">
			<view class="banar-box">
				<view class="lang-btn" @click="showLangMenu=!showLangMenu">
					<wjf-iconfont code="e6ee" color="#fff" size="22"></wjf-iconfont>
					<text class="lang-btn-text">{{currLang}}</text>

				</view>
				<view class="down-menu" v-if="showLangMenu">
					<template v-for="(item,index) in langMenu" :key="index">
						<view class="lang-item-box" @click="onSeleLang(item)">
							<text>{{item.text}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view :class="{'navbar-wider':matchLeftWindow}">
			<view class="mini-banar-box">
				<view class="lang-btn" @click="showLangMenu=!showLangMenu">
					<wjf-iconfont code="e6ee" color="#fff" size="22"></wjf-iconfont>
					<text class="lang-btn-text">{{currLang}}</text>
				</view>
				<view class="down-menu" v-if="showLangMenu">
					<template v-for="(item,index) in langMenu" :key="index">
						<view class="lang-item-box" @click="onSeleLang(item)">
							<text>{{item.text}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="navbar" :class="{'navbar-mini':!matchLeftWindow}">
			<view class="nav-title-list">
				<template v-for="(item,index) in titleList" :key="index">
					<view :class="['list-item',index==titleIndex?'list-item-act':'']" @click="navToUrl(item,index)">
						<text>{{item.text}}</text>
					</view>
				</template>
			</view>
			<!-- 小屏时的下拉菜单 -->
			<view class="navbar-left">
				<uni-icons @click="toggleSidebar" type="bars" class="menu-icon" size="30" color="#fff"></uni-icons>
				<view class="mini-menu-list" v-if="showMiniMenu">
					<template v-for="(item,index) in titleList" :key="index">
						<view class="menu-list-item" @click="leftNavToUrl(item)">
							<text>{{item.text}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import errorLog from '@/windows/components/error-log.vue'
	import config from '@/admin.config.js'
	import $w from './i18n/i18n.js'
	export default {
		// mixins:[i18n],
		components: {
			errorLog
		},
		props: {
			navigationBarTitleText: {
				type: String
			},
			// 目前只能理解为，它是框架直接传递过来，因为找不到它的来源
			matchLeftWindow: {
				type: Boolean
			},
			showLeftWindow: {
				type: Boolean
			}
		},
		data() {
			return {
				// currLang: '中文',
				showLangMenu: false,
				langMenu: [{
						text: '中文',
						lang: 'zh-Hans'
					},
					{
						text: 'English',
						lang: 'en'
					},
					{
						text: 'русский язык',
						lang: 'ru'
					},
					{
						text: 'Қазақ тілі',
						lang: 'kk'
					}
				],
				...config.navBar,
				popupMenuOpened: false,
				mpCapsule: 0,
				langIndex: 0,
				titleIndex: 0,
				showMiniMenu: false
			}
		},
		computed: {
			...mapState('app', ['appName', 'routes', 'theme']),
			...mapState('error', ['logs']),
			userInfo() {
				return this.$uniIdPagesStore.store.userInfo
			},
			themeIndex() {
				let i = 0
				this.themes.forEach((theme, index) => {
					if (theme.value === this.theme) i = index
				})
				return i
			},
			currLang() {

				return this.langMenu.filter(item => item.lang == uni.getLocale())[0].text
			},
			locaLang(){
				return uni.getLocale()
			},
			titleList() {
				return [{
						text: $w(this.locaLang,'首页'),
						index: 0,
						url: '/pages/index/index'
					}, {
						text: $w(this.locaLang,'联盟动态'),
						index: 1,
						url: '/pages/publish/news-article-list'
					}, {
						text: $w(this.locaLang,'行业数据'),
						index: 2,
						url: '/pages/publish/publish-list'
					}, {
						text: $w(this.locaLang,'展会活动'),
						index: 3,
						url: '/pages/expo-forum/expo-forum'
					}, {
						text: $w(this.locaLang,'联盟介绍'),
						index: 4,
					},
					{
						text: $w(this.locaLang,'用户中心'),
						index: 5,
						url: '/pages/index/user'
					}
				]
			}
		},
		watch: {
			matchLeftWindow(val) {
				// console.log(val);
				this.showMiniMenu = false
				this.$set(this, 'height', val ? '170px' : '100px');
			}
		},
		mounted() {
			console.log('进入窗体',uni.getLocale());
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.mpCapsule = menuButtonInfo.width
			// #endif

			// #ifdef H5
			// let locale = uni.getLocale();
			this.$nextTick(() => {
				// let index = this.langs.findIndex((item) => {
				// 	return item.lang === locale;
				// });
				// this.changeLanguage(index)
			})
			// #endif
			uni.onLocaleChange((res) => {
				// console.log(res);
				uni.setStorageSync('CURRENT_LANG', res.locale)
				uni.$emit("changeLanguage", res.locale)
			})
		},
		methods: {
			...mapMutations('app', ['SET_THEME']),
			navToUrl(item, index) {
				// console.log(item);
				this.titleIndex = index
				uni.reLaunch({
					url: item.url,
					success: () => {
						// this.showMiniMenu = false
					}
				})
			},
			onSeleLang(item) {
				// this.currLang = item.text
				this.showLangMenu = false
				uni.setLocale(item.lang)

			},
			leftNavToUrl(item) {
				uni.reLaunch({
					url: item.url,
					success: () => {
						this.showMiniMenu = false
					}
				})
			},
			showErrorLogs() {
				if (this.popupMenuOpened) {
					this.popupMenuOpened = false
				}
				this.$refs.errorLogsPopup.open()
			},
			showPasswordPopup() {
				if (this.popupMenuOpened) {
					this.popupMenuOpened = false
				}
				this.$refs.passwordPopup.open()
			},
			logout() {
				this.popupMenuOpened = false
				this.$uniIdPagesStore.mutations.logout()
			},
			toggleSidebar() {
				this.showMiniMenu = !this.showMiniMenu
			},
			togglePopupMenu() {
				this.popupMenuOpened = !this.popupMenuOpened
			},
			changePassword() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd',
					complete: () => {
						this.popupMenuOpened = false
					}
				})
			},
			changeLanguage(e) {
				let index = typeof e === 'object' ? e.detail.value : e
				if (!index || index < 0) index = 0;
				const lang = this.langs[index].lang || 'zh-Hans'
				const platform = uni.getSystemInfoSync().platform
				if (platform === 'android') {
					uni.showToast({
						icon: 'error',
						title: '暂不支持123',
						duration: 2000
					})
					return
				}
				this.$i18n.locale = lang
				this.langIndex = index;
				uni.setLocale(lang)
			},
			linkTo() {
				uni.reLaunch({
					url: '/'
				})
			},
			changeTheme(e) {
				const index = typeof e === 'object' ? e.detail.value : e
				const theme = this.themes[index].value || 'default'
				if (this.theme !== theme) this.SET_THEME(theme)
			}
		}
	}
</script>

<style lang="scss">
	// 在平板以下，保持navbar-middle
	@media screen and (max-width: 767px) {
		.navbar-left {
			flex: 1;
			/* #ifdef MP */
			margin-right: 97px;
			/* #endif */
		}
	}

	.navbar-left {
		display: flex;
		position: relative;
		// background-color: limegreen;
		// padding: 10rpx 0;

		.mini-menu-list {
			position: absolute;
			top: 30px;
			left: -10px;
			// width: 160rpx;
			display: flex;
			flex-direction: column;
			border: #ccc solid 1px;
			z-index: 999 !important;
			background-color: rgba(255, 255, 255, 1);
			padding: 20rpx;
			border-radius: 6rpx;

			.menu-list-item {
				display: flex;
				justify-content: center;
				// margin: 20rpx 0;
				padding: 20rpx 10rpx;

				text {
					color: #333;
				}

			}
		}
	}

	.header {
		height: 60px;
		height: 100%;
		width: 800px;
		margin: 0 auto;
		box-sizing: border-box;
		border-bottom: 1px solid darken($top-window-bg-color, 8%);
		color: $top-window-text-color;
	}

	.banar-box {
		position: relative;
		height: 120px;
		max-width: 800px;
		min-width: 768px;
		width: 100vw;
		background-image: url('/static/banar.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.mini-banar-box {
		position: relative;
		height: 120px;
		width: 100vw;
		background-image: url('/static/banar-mini.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.lang-btn {
		position: absolute;
		top: 10rpx;
		right: 6rpx;
		width: 220rpx;
		height: 40rpx;
		// background-color: green;
		display: flex;
		align-items: center;
		cursor: pointer;

		.lang-btn-text {
			margin-left: 4rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.down-menu {
		position: absolute;
		top: 56rpx;
		right: 6rpx;
		padding: 8rpx 20rpx;
		color: deepskyblue;
		font-size: 26rpx;
		border-radius: 4rpx;
		background-color: rgba(255, 255, 255, 0.9);
		z-index: 99;
		cursor: pointer;

		.lang-item-box {
			margin: 10rpx 0;
		}
	}

	.navbar {
		font-size: 14px;
		position: relative;
		height: 50px;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #00437c;
	}

	.logo {
		min-width: 223px;
		display: flex;
		align-items: center;

		.logo-image {
			// logo宽高开发者可根据情况自行调节
			width: 40px;
			height: 40px;
			border-radius: 6px;
		}

		.logo-text {
			margin-left: 8px;
		}
	}

	.menu-icon {
		width: 30px;
		height: 30px;
		line-height: 30px;
	}

	.navbar-middle,
	.navbar-right {
		flex: 1;
		/* #ifdef MP */
		margin-right: 97px;
		/* #endif */
	}

	.navbar-right-item-gap {
		margin-right: 30px;
	}


	.navbar-middle,
	.username {
		display: flex;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.navbar-middle {
		text-align: center;
	}

	.username {
		max-width: 150px;
	}

	.title-text {
		font-size: 14px;
		line-height: 30px;
	}

	.navbar-menu {
		display: flex;
	}

	.menu-item {
		padding: 8px;
		font-size: 16px;
		color: #555;
		line-height: 1;
	}

	.debug {
		display: inline-block;
		position: relative;
	}

	.debug-badge {
		position: absolute;
		top: 5px;
		right: 14px;
		transform: translateY(-50%) translateX(100%) scale(0.8);
	}

	.arrowdown {
		margin-top: 4px;
		margin-left: 3px;
	}

	.person {
		margin-top: 2px;
		margin-right: 2px;
	}

	.navbar-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.navbar-right .uni-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0);
		z-index: 999;
	}

	.popup-menu__arrow {
		position: absolute;
		top: -6px;
		right: 20px;
		border-width: 6px;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #ebeef5;
		filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .1));
	}

	.popup-menu__arrow::after {
		content: " ";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 10px;
		top: 1px;
		margin-left: -10px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	/* 大屏时，隐藏的内容 */
	.menu-icon,
	.navbar-middle,
	// .navbar-user,
	.popup-menu__arrow,
	.navbar-wider .mini-banar-box,
	.navbar-right .uni-mask {
		display: none;
	}

	/* 小屏，显示的内容 */
	.navbar-mini .menu-icon {
		display: block;
	}

	.navbar-user {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-title-list {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		text-align: center;
		// background-color: skyblue;

		.list-item {
			width: 140px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0rpx;
			cursor: pointer;
			color: #fff;
			font-size: 16px;
			line-height: 1.1;
		}

		.list-item:hover {
			font-size: 17px;
			font-weight: 550;
		}

		.list-item-act {
			font-size: 17px;
			font-weight: 550;
		}
	}

	/* 小屏时，隐藏的内容 */
	// .navbar-mini .navbar-menu .username
	.navbar-mini .logo,
	.navbar-mini .debug,
	.navbar-mini .nav-title-list,
	.navbar-mini .banar-box,
	.navbar-menu {
		display: none;
	}

	.navbar-menu {
		width: 100px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		/* #ifdef MP */
		// right: 97px;
		/* #endif */
		top: 27px;
		/* #ifndef H5 */
		// top: 85pxs: ;
		/* #endif */
		background-color: #fff;
		z-index: 999;
		padding: 10px 0;
		background-color: #fff;
		border: 1px solid #ebeef5;
		border-radius: 4px;
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
	}

	/* 小屏时，弹出下拉菜单 */
	.popup-menu .navbar-menu {
		display: flex;
	}

	.popup-menu .popup-menu__arrow,
	.popup-menu .navbar-right .uni-mask {
		display: block;
	}

	.hover-highlight:hover {
		color: $menu-text-color-actived;
	}

	.svg-icon {
		width: 1em;
		height: 1em;
		vertical-align: -.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.password-popup {
		padding: 30px;
	}


	.language-item {
		font-stretch: 12px;
		vertical-align: baseline;
		text-decoration: underline;
	}

	.lang-icon {
		font-size: 18px;
		margin-top: 5px;
		margin-right: 30px;
	}

	.user-icon {
		font-size: 20px;
	}
</style>